<template>
	<view class="container">
		<!-- 公共头部 -->
		<view class="header">
			<text class="title">欢迎使用</text>
			<text class="subtitle">请选择访问模式</text>
		</view>

		<!-- 移动端布局 -->
		<view class="mobile-layout">
			<navigator url="/pages/h5/Index" open-type="redirect" class="button h5-button">
				<text class="button-text">移动端模式</text>
				<text class="button-desc">适合手机浏览器访问</text>
			</navigator>

			<navigator url="/pages/pc/Index" open-type="redirect" class="button pc-button">
				<text class="button-text">电脑端模式</text>
				<text class="button-desc">适合桌面浏览器访问</text>
			</navigator>
		</view>

		<!-- PC端布局 -->
		<view class="pc-layout">
			<view class="grid">
				<navigator url="/pages/h5/Index" open-type="redirect" class="card alternate">
					<text class="card-title">切换到移动版</text>
					<text class="card-desc">适合手机浏览器访问</text>
				</navigator>

				<navigator url="/pages/pc/Index" open-type="redirect" class="card main">
					<text class="card-title">电脑端模式</text>
					<text class="card-desc">已为您优化大屏体验</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 不需要设备检测逻辑，纯CSS实现
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		overflow: hidden;
		padding: 100rpx 40rpx 0;
		box-sizing: border-box;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	}

	.header {
		text-align: center;
		margin-bottom: 80rpx;

		.title {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 16rpx;
		}

		.subtitle {
			display: block;
			font-size: 28rpx;
			color: #666;
		}
	}

	/* 移动端样式 (默认显示) */
	.mobile-layout {
		display: block;
		width: 100%;
		max-width: 600rpx;
		margin: 0 auto;

		.button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 200rpx;
			border-radius: 16rpx;
			margin-bottom: 40rpx;
			padding: 30rpx;
			box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;

			&:active {
				transform: translateY(5rpx);
				box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
			}

			&-text {
				font-size: 36rpx;
				font-weight: bold;
				color: white;
				margin-bottom: 10rpx;
			}

			&-desc {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}

		.h5-button {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		}

		.pc-button {
			background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
		}
	}

	/* PC端样式 (默认隐藏) */
	.pc-layout {
		display: none;

		.grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 30px;
			max-width: 1200px;
			margin: 0 auto;
		}

		.card {
			padding: 40px;
			border-radius: 12px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
			cursor: pointer;
			text-align: center;

			&-title {
				display: block;
				font-size: 1.5rem;
				font-weight: bold;
				margin-bottom: 12px;
			}

			&-desc {
				display: block;
				color: #666;
				font-size: 1rem;
			}

			&.main {
				background: linear-gradient(135deg, #3498db, #2c3e50);
				color: white;

				.card-desc {
					color: rgba(255, 255, 255, 0.8);
				}
			}

			&.alternate {
				background: white;
				border: 1px solid #eee;
			}

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
			}
		}
	}

	/* 媒体查询 - PC端 */
	@media (min-width: 768px) {
		.mobile-layout {
			display: none;
		}

		.pc-layout {
			display: block;
		}

		.header {
			margin-bottom: 60px;

			.title {
				font-size: 2.5rem;
			}

			.subtitle {
				font-size: 1.2rem;
			}
		}
	}
</style>